<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${post != null ? post.title + ' - 美食社区' : '美食日记 - 美食社区'}">美食日记详情 - 美食社区</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
    <!-- Lightbox -->
    <link href="https://cdn.bootcdn.net/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        .post-header {
            position: relative;
            height: 350px;
            background-size: cover;
            background-position: center;
            margin-bottom: 30px;
        }

        .post-header-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 30px;
            color: white;
        }

        .post-meta {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .post-author-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 15px;
            object-fit: cover;
        }

        .post-author-info h5 {
            margin: 0;
            color: white;
        }

        .post-date {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }

        .post-title {
            font-size: 36px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .post-category {
            background-color: #fff3e6;
            color: #fd7e14;
            border: 1px solid #ffd7b5;
            border-radius: 20px;
            padding: 5px 15px;
            font-size: 14px;
            display: inline-block;
        }

        .post-content {
            font-size: 18px;
            line-height: 1.8;
            margin-bottom: 30px;
        }

        .post-content img {
            max-width: 100%;
            height: auto;
            margin: 20px 0;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .post-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            grid-gap: 15px;
            margin-bottom: 30px;
        }

        .gallery-item {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .gallery-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .gallery-item:hover img {
            transform: scale(1.05);
        }

        .post-actions {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            padding: 15px 0;
            border-top: 1px solid #e9ecef;
            border-bottom: 1px solid #e9ecef;
        }

        .post-action-btn {
            display: flex;
            align-items: center;
            color: #6c757d;
            background: none;
            border: none;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .post-action-btn:hover {
            color: #fd7e14;
        }

        .post-action-btn i {
            margin-right: 5px;
        }

        .post-action-btn.liked {
            color: #dc3545;
        }

        .comment-form {
            margin-bottom: 30px;
        }

        .comment-card {
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
            overflow: hidden;
        }

        .comment-header {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            background-color: #f8f9fa;
        }

        .comment-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 15px;
            object-fit: cover;
        }

        .comment-author {
            font-weight: 500;
        }

        .comment-date {
            font-size: 12px;
            color: #adb5bd;
            margin-left: auto;
        }

        .comment-content {
            padding: 20px;
        }

        .comment-images {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }

        .comment-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 5px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .comment-image:hover {
            transform: scale(1.05);
        }

        .btn-primary {
            background-color: #fd7e14;
            border-color: #fd7e14;
        }

        .btn-primary:hover {
            background-color: #e76b00;
            border-color: #e76b00;
        }

        .related-posts {
            margin-top: 50px;
        }

        .related-post-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
            border-radius: 10px;
            overflow: hidden;
        }

        .related-post-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .related-post-img {
            height: 150px;
            overflow: hidden;
        }

        .related-post-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .related-post-card:hover .related-post-img img {
            transform: scale(1.1);
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <nav th:replace="~{common/header :: header}"></nav>

    <div class="post-header" th:if="${post != null}"
        th:style="${firstImage != null ? 'background-image: url(' + firstImage + ')' : ''}">
        <div class="post-header-overlay">
            <div class="post-meta">
                <img th:src="${authorAvatar}" class="post-author-avatar" alt="作者头像">
                <div class="post-author-info">
                    <h5 th:text="${authorName}">作者名</h5>
                    <span class="post-date"
                        th:text="${post.createTime != null ? #temporals.format(post.createTime, 'yyyy-MM-dd HH:mm') : ''}">发布日期</span>
                </div>
            </div>
            <h1 class="post-title" th:text="${post.title}">文章标题</h1>
            <span class="post-category" th:text="${categoryName != null ? categoryName : '未分类'}">中餐</span>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <!-- 文章内容 -->
                <div th:if="${post != null}">
                    <div class="post-content" th:utext="${post.content}">
                        <p>这里是文章内容...</p>
                    </div>

                    <!-- 图片画廊 -->
                    <div class="post-gallery" th:if="${post.images != null && post.images != ''}">
                        <a th:each="image : ${#strings.arraySplit(post.images, ',')}" th:href="${image}"
                            data-lightbox="post-gallery" class="gallery-item">
                            <img th:src="${image}" alt="美食图片">
                        </a>
                    </div>

                    <!-- 文章操作 -->
                    <div class="post-actions">
                        <button class="post-action-btn" id="likeBtn" th:attr="data-post-id=${post.id}">
                            <i class="fas fa-heart"></i>
                            <span th:text="${post.likes}">0</span> 喜欢
                        </button>
                        <!--<button class="post-action-btn">-->
                        <!--    <i class="fas fa-comment"></i>-->
                        <!--    <span>0</span> 评论-->
                        <!--</button>-->
                        <!-- <button class="post-action-btn">
                            <i class="fas fa-share"></i>
                            分享
                        </button>
                        <button class="post-action-btn">
                            <i class="fas fa-bookmark"></i>
                            收藏
                        </button> -->
                    </div>

                    <!-- 评论表单 -->
                    <div class="comment-form" th:if="${session.user != null}">
                        <h4 class="mb-3">发表评论</h4>
                        <form id="commentForm">
                            <input type="hidden" name="postId" th:value="${post.id}">
                            <div class="mb-3">
                                <textarea class="form-control" name="content" rows="3" placeholder="写下你的评论..."
                                    required></textarea>
                            </div>
                            <div class="mb-3">
                                <input type="file" class="form-control" name="imageFiles" multiple accept="image/*">
                            </div>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-paper-plane me-2"></i>提交评论
                            </button>
                        </form>
                    </div>

                    <!-- 评论列表 -->
                    <div class="comments-section">
                        <h4 class="mb-3">评论 (<span th:text="${commentCount}">0</span>)</h4>
                        <div th:if="${comments.isEmpty()}" class="alert alert-info">
                            暂无评论，快来成为第一个评论的人吧！
                        </div>
                        <div class="comment-card" th:each="comment : ${comments}">
                            <div class="comment-header">
                                <img th:src="${comment.userAvatar != null ? comment.userAvatar : '/images/default-avatar.jpg'}"
                                    class="comment-avatar" alt="用户头像">
                                <div>
                                    <h5 class="comment-author"
                                        th:text="${comment.nickname != null ? comment.nickname : comment.username}">用户名
                                    </h5>
                                </div>
                                <span class="comment-date"
                                    th:text="${#temporals.format(comment.createTime, 'yyyy-MM-dd HH:mm')}">2023-06-15
                                    14:30</span>
                            </div>
                            <div class="comment-content">
                                <p th:text="${comment.content}">这是一条评论内容...</p>
                                <div class="comment-images" th:if="${comment.images != null && comment.images != ''}">
                                    <a th:each="image : ${#strings.arraySplit(comment.images, ',')}" th:href="${image}"
                                        data-lightbox="comment-images"
                                        th:data-title="${comment.nickname != null ? comment.nickname : comment.username} + '的评论图片'">
                                        <img th:src="${image}" class="comment-image" alt="评论图片">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 文章不存在提示 -->
                <div class="alert alert-info" th:if="${post == null}">
                    <h4 class="alert-heading">文章不存在或已被删除</h4>
                    <p>您访问的文章不存在或已被作者删除。</p>
                    <hr>
                    <p class="mb-0">
                        <a href="/posts" class="alert-link">返回美食日记列表</a>
                    </p>
                </div>
            </div>

            <div class="col-lg-4">
                <!-- 作者信息 -->
                <div class="card mb-4" th:if="${post != null}">
                    <div class="card-header">
                        <h5 class="mb-0">关于作者</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <img th:src="${authorAvatar}" class="me-3"
                                style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover;" alt="作者头像">
                            <div>
                                <h5 class="mb-1" th:text="${authorName}">作者名</h5>
                                <p class="text-muted mb-0">美食爱好者</p>
                            </div>
                        </div>
                        <div class="mt-3">
                            <a href="#" class="btn btn-outline-primary btn-sm w-100">
                                <i class="fas fa-user-plus me-2"></i>关注作者
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 相关文章 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">相关文章</h5>
                    </div>
                    <div class="card-body">
                        <div th:if="${relatedPosts.isEmpty()}" class="text-center text-muted">
                            暂无相关文章
                        </div>
                        <div class="related-post-card mb-3" th:each="post : ${relatedPosts}">
                            <a th:href="@{'/post/' + ${post.id}}" class="text-decoration-none text-dark">
                                <div class="related-post-img">
                                    <img th:src="${post.firstImage}" alt="相关文章">
                                </div>
                                <div class="p-3">
                                    <h6 class="mb-1" th:text="${post.title}">相关文章标题</h6>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <small class="text-muted" th:text="${post.authorName}">作者名</small>
                                        <small class="text-muted"
                                            th:text="${#dates.format(post.createTime, 'yyyy-MM-dd')}">2023-06-10</small>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- Lightbox -->
    <script src="https://cdn.bootcdn.net/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
    <!-- 退出登录脚本 -->
    <script th:replace="~{common/header :: logout-script}"></script>

    <script th:if="${post != null}">
        $(document).ready(function () {
            // 点赞功能
            $('#likeBtn').click(function () {
                const postId = $('#likeBtn').data('post-id');
                $.post('/api/posts/' + postId + '/like', function (res) {
                    if (res.code === 200) {
                        $('#likeBtn').addClass('liked');
                        $('#likeBtn span').text(res.data);
                    } else {
                        alert(res.message || '操作失败，请重试');
                    }
                });
            });

            // 评论提交
            $('#commentForm').submit(function (e) {
                e.preventDefault();

                const formData = new FormData(this);

                $.ajax({
                    url: '/api/comments',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        if (res.code === 200) {
                            alert('评论发表成功！');
                            window.location.reload();
                        } else {
                            alert(res.message || '评论发表失败，请重试');
                        }
                    },
                    error: function () {
                        alert('评论发表失败，请重试');
                    }
                });
            });
        });
    </script>
</body>

</html>